<template>
  <div>
    <div>
      <el-descriptions :column="4">
        <el-descriptions-item label="商品名称">{{ SpuInfo.spuName }}</el-descriptions-item>
        <el-descriptions-item label="品牌">{{ brandInfo?.name }}</el-descriptions-item>
        <el-descriptions-item label="商品编号(spu)">{{ SpuInfo.id }}</el-descriptions-item>
        <el-descriptions-item label="店铺">{{ businessInfo?.nickname }}</el-descriptions-item>
        <!--        TODO  遍历快速显示属性 -->
      </el-descriptions>
    </div>
  </div>
</template>

<script setup>
import {ref, defineProps, onMounted} from "vue";
import {getBrandById} from '@/api/brand'
import {getSpuApi} from '@/api/goods'
import {getBusinessById} from '@/api'

let {descInfo} = defineProps(['descInfo'])
let brandInfo = ref()
let SpuInfo = ref({})
let businessInfo = ref()

function getBrand() {
  getBrandById(descInfo.skuInfo.brandId).then(res => {
    brandInfo.value = res.data
  })
}

function getSpu() {
  getSpuApi(descInfo.skuInfo.spuId).then(res => {
    SpuInfo.value = res.data
    getBusinessById(SpuInfo.value.businessId).then(res => {
      businessInfo.value = res.data
    })
  })
}

onMounted(() => {
  getBrand()
  getSpu()
})

</script>

<style scoped>

</style>
